<template>
    <div>
        <h2>订单详情</h2>
        <div :data="orders">
            <h3>商品信息</h3>
            <div class="house">
                <img src="../assets/images/p2.jpg" alt="">
                <span class="name">{{orders.goods_name}}</span>
                <span class="statu">（优惠券编号：{{orders.serial_no}}；{{orders.promo_status}}）</span>
                <span class="lou"></span>
            </div>
            <!--            <div class="house">-->
            <!--                <div class="up">-->
            <!--                    <img src="../assets/images/p1.jpg" alt="">-->
            <!--                    <span class="name">{{orders.goods_name}}</span>-->
            <!--                    <span class="statu">（认购状态：；房源状态：；认购金：）</span>-->
            <!--                    <span class="lou"></span>-->
            <!--                </div>-->
            <!--                <el-button type="primary">手动修改房源状态为“已认购”</el-button>-->
            <!--            </div>-->
        </div>
        <div class="order">
            <h3>订单信息</h3>
            <el-row :gutter="20" style="margin-left: 0;margin-right: 0">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span>下单用户：{{orders.user_pet_name}}</span>
                        <span>订单状态：{{orders.orders_status}}</span>
                        <span>下单时间：{{orders.orders_time}}</span>
                        <span>流水号：{{orders.serial_no}}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span>订单号：{{orders.orders_no}}</span>
                        <span>订单总额：{{orders.orders_total}}</span>
                        <span>付款方式：{{orders.payment_method}}</span>
                        <span>付款时间：{{orders.payment_time}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="order">
            <h3>买家信息</h3>
            <el-row :gutter="20" style="margin-left: 0;margin-right: 0">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span>用户账号：{{orders.user_id}}</span>
                        <span>联系电话：{{orders.user_iphone}}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span>真实姓名：{{orders.user_name}}</span>
                        <span>证件号码：{{orders.user_card}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="order">
            <h3>操作记录</h3>
        </div>
        <el-button type="primary" @click="myReturn">返回</el-button>
    </div>
</template>

<script>
    import * as api from '../utils/api'
    export default {
        name: "OrderDetails",
        data(){
            return{
                // promo_code:'123456',
                // promo_status:'已使用',
                // real_estate_name:'蓝光coco',
                // subscription_status:'认购成功',
                // listing_status:'已认购',
                // subscribe:'50万',
                // admin_name:'周杰伦',
                // order_no:'123456',
                orders:{
                    orders_id:this.$route.query.row.orders_id,
                    // goods_name:this.$route.query.row.goods_name,
                    goods_name:"一期13栋一单元一楼2号(绿地498)",
                    serial_no:this.$route.query.row.serial_no,
                    promo_status:this.$route.query.row.promo.promo_status,
                    orders_status:this.$route.query.row.orders_status,
                    orders_time:this.$route.query.row.orders_time,
                    orders_no:this.$route.query.row.orders_no,
                    orders_total:this.$route.query.row.orders_total,
                    payment_method:this.$route.query.row.payment_method,
                    payment_time:this.$route.query.row.payment_time,
                    user_id:this.$route.query.row.user.user_id,
                    user_iphone:this.$route.query.row.user.user_iphone,
                    user_name:this.$route.query.row.user.user_name,
                    user_card:this.$route.query.row.user.user_card,
                    user_pet_name:this.$route.query.row.user.user_pet_name,
                }
            }
        },
        created() {
            console.log(this.$route.query)
        },
        methods:{
            myReturn(){
                // this.axios({
                //     method:'get',
                //     url:api.SELECTORDERBYNO,
                //     params:{}
                // })
                // 取到路由带过来的参数
                // var routerQuery = this.$route.query.orders_id
                // 将数据放在当前组件的数据内
                // this.orders_id = routerQuery
                this.$router.push({
                    name:'OrderManage',
                    path:'/Home/ZxHousingManager/OrderManage',
                    query:{}
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .house{
        padding: 10px;
        background-color: lightgray;
        min-height: 50px;
        margin: 5px auto;
        .up{
            height: 50px;
        }
        button{
            display: block;
            height: 30px;
            line-height: 0;
            margin: 0 auto;
        }
        img{
            display: block;
            background-color: #ff9afd;
            width: 50px;
            height: 50px;
            float: left;
        }
        span{
            display: block;
            line-height: 50px;
            float: left;
        }
        .name{
            color: #4e58ff;
        }
        .lou{
            color: #4e58ff;
            float: right;
        }
    }
    .order{
        background-color: lightgray;
    }
    .order span{
        display: block;
        margin: 10px 10px;
    }
    .el-row {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        /*background: lightgray;*/
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    button{
        display: block;
        margin: 0 auto;
    }
</style>